<template>
  <el-popover
      placement="bottom"
      width="550"
      trigger="click">
    <div style="max-height:400px;overflow-y: scroll;overflow-x:hidden">
      <el-button
          plain
          v-for="(item,index) in iconList"
          :key="index"
          style="margin:2px;"
          @click="chooseIcon(item)"
          :icon="item"
      >
      </el-button>
    </div>
    <el-input slot="reference"  v-model="value" readonly>
      <i slot="prefix" :class="value === undefined ? 'el-icon-edit' : value"></i>
    </el-input>
  </el-popover>
</template>

<script>
import EnumUtil from '../../utils/EnumUtil'

export default {
  name: 'IconSelector',
  props: ['value'],
  data () {
    return {
      iconList: []
    }
  },
  beforeMount () {
    this.iconList = EnumUtil.iconList
  },
  watch: {
    value (newValue, oldValue) {
      this.$emit('input', newValue)
    }
  },
  methods: {
    chooseIcon (item) {
      this.value = item
      document.body.click()
    },
    getValue () {
      return this.value
    }
  }
}
</script>

<style scoped>

</style>